<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="format-detection" content="telephone=no" />
	<meta name="renderer" content="webkit">
	<title>Select 选择器</title>
	<link rel="stylesheet" href="css/doc.css">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
.site-title{ margin: 30px 0 20px;}
.site-title fieldset{border: none; padding: 0; border-top: 1px solid #eee;}
.site-title fieldset legend{margin-left: 20px;  padding: 0 10px; font-size: 22px; font-weight: 300;}
	</style>
</head>
<body>
<div class="doc-layout">
	<div class="doc-side">
		<h1>Select</h1>
		<h2>文档目录</h2>
		<ul>
			<li><a href="#use" title="使用方法">使用方法</a></li>
			<li><a href="#demo" title="演示">演示</a></li>
			<li><a href="#param" title="可配置参数">可配置参数</a></li>
			<li><a href="#custom" title="多种用法">多种用法</a></li>
		</ul>
		<h2>AUTHOR</h2>
		<ul>
			<li><a href="" target="_blank">@cm</a></li>
		</ul>
	</div>
	<div class="doc-content" id="doc-content">
		<div class="layui-main">
			<h1 class="doc-h1">Select 选择器</h1>


			<div class="site-title">
			  <fieldset><legend><a name="before">基础用法</a></legend></fieldset>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<select name="" id="demo1" class="fc-select">
						<option value="0">北京</option>
						<option value="1" selected="">上海</option>
						<option value="2">广州</option>
						<option value="3">深圳</option>
					</select>
				</div>
				<button class="layui-btn change-data">动态改变数据</button>

				<div class="layui-inline">
					<select name="" id="" class="fc-select" size="small">
						<option value="0">牛奶</option>
						<option value="1">咖啡</option>
						<option value="2">豆浆</option>
						<option value="3">芝麻糊</option>
					</select>
				</div>

				<div class="layui-inline">
					<select name="" id="" class="fc-select" size="large">
						<option value="0">拿铁</option>
						<option value="1">摩卡</option>
						<option value="2">卡布基诺</option>
						<option value="3">香草</option>
					</select>
				</div>
			</div>


			<div class="site-title">
			  <fieldset><legend><a name="before">data数据</a></legend></fieldset>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<select name="" id="" class="fc-select2" placeholder="动态数据">
					</select>
				</div>
			</div>
			
			<div class="site-title">
			  <fieldset><legend><a name="before">多选</a></legend></fieldset>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline" style="width:300px;">
					<select class="fc-select3"></select>
					<div id="multiple" style="color:#b3b3b3">["Espresso","Latte","Cappuccino"]</div>
				</div>
				<div class="layui-inline" style="vertical-align: top;margin-left:30px;width:300px;">
					<select class="fc-select4"></select>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline" style="vertical-align: top;width:300px;">
					<select class="fc-select5">
						<option value="1" selected>拿铁</option>
						<option value="2" selected>摩卡</option>
						<option value="3" selected>卡布基诺</option>
						<option value="4" selected>香草</option>
						<option value="5" selected>双皮奶</option>
					</select>
				</div>
				<div class="layui-inline" style="vertical-align: top;margin-left:30px;width:300px;">
					<select class="fc-select5">
						<option value="菠萝">菠萝</option>
						<option value="草莓" selected>草莓</option>
						<option value="猕猴桃" selected>猕猴桃</option>
						<option value="椰子" selected>椰子</option>
						<option value="人参果" selected>人参果</option>
					</select>
				</div>
			</div>


			<div class="site-title">
			  <fieldset><legend><a name="before">有禁用选项</a></legend></fieldset>
			</div>
			<div class="layui-form-item layui-word-aux">通过给option设置属性 <span class="layui-badge layui-bg-green">disabled</span> 禁用当前选项。</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<select name="" id="" class="fc-select">
						<option value="0">北京</option>
						<option value="1" selected="">上海</option>
						<option value="2" disabled>广州</option>
						<option value="3">深圳</option>
					</select>
				</div>
			</div>


			<div class="site-title">
			  <fieldset><legend><a name="before">禁用状态</a></legend></fieldset>
			</div>
			<div class="layui-form-item layui-word-aux">通过给Select设置属性 <span class="layui-badge layui-bg-green">disabled</span> 禁用整个选择器。</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<select name="" id="" class="fc-select" disabled>
						<option value="0">北京</option>
						<option value="1">上海</option>
						<option value="2">广州</option>
						<option value="3">深圳</option>
					</select>
				</div>
			</div>


			<div class="site-title">
			  <fieldset><legend><a name="before">可清空</a></legend></fieldset>
			</div>
			<div class="layui-form-item layui-word-aux">通过设置属性 <span class="layui-badge layui-bg-green">clearable</span> 可以清空已选项，仅适用于单选模式。</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<select name="" id="" class="fc-select" clearable>
						<option value="0">北京</option>
						<option value="1" selected="">上海</option>
						<option value="2">广州</option>
						<option value="3">深圳</option>
					</select>
				</div>
			</div>



			<fieldset class="layui-elem-field layui-field-title" id="use"><legend>使用方法</legend></fieldset>
			<pre class="layui-code" lay-encode="true">
				// layui 配置插件目录
				layui.config({
				   base: 'js/lay-module/',
				}).extend({
				   fcSelect:'fcSelect/fcSelect',
				})

				调用
				fcSelect.render({
				   elem:'.fc-select',
				   target:'.doc-content',
				   change:function(data) {
				      console.log(data)
				   }
				})
			</pre>

			<br><br>

			<fieldset class="layui-elem-field layui-field-title" ><legend>API</legend></fieldset>
			<table class="layui-table" lay-skin="line">
				<thead>
					<tr>
						<td>参数</td>
						<td>说明</td>
						<td>类型</td>
						<td>默认值</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>elem</td>
						<td>指定元素名称</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>target</td>
						<td>元素在指定的含有滚动条的结构中，页面滚动时候需要，默认body</td>
						<td>string</td>
						<td>body</td>
					</tr>
					<tr>
						<td>size</td>
						<td>输入框尺寸,large | normal | small</td>
						<td>string</td>
						<td>normal</td>
					</tr>
					<tr>
						<td>data</td>
						<td>select数据，或直接使用option</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>placeholder</td>
						<td>占位符，也可以直接写在select中</td>
						<td>String</td>
						<td>请选择</td>
					</tr>
					<tr>
						<td>multiple</td>
						<td>多选</td>
						<td>Boolean</td>
						<td>false</td>
					</tr>
					<tr>
						<td>maxTagCount</td>
						<td>多选时用户最多可以选择的项目数</td>
						<td>number</td>
						<td>0</td>
					</tr>
				</tbody>				
			</table>
			<br><br>

			<fieldset class="layui-elem-field layui-field-title" ><legend>Select Events</legend></fieldset>
			<table class="layui-table" lay-skin="line">
				<thead>
					<tr>
						<td>事件名称</td>
						<td>说明</td>
						<td>回调参数</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>change</td>
						<td>选中值发生变化时触发，返回elem,value,label,elem是当前select。<Br>多选会在结构中有一个隐藏input，保存已选项</td>
						<td>目前的选中值</td>
					</tr>	
				</tbody>				
			</table>
			<br><br>

			<fieldset class="layui-elem-field layui-field-title" ><legend>Option Attributes</legend></fieldset>
			<table class="layui-table" lay-skin="line">
				<thead>
					<tr>
						<td>参数</td>
						<td>说明</td>
						<td>类型</td>
						<td>默认值</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>clearable</td>
						<td>是否可以清空选项，只在单选时有效</td>
						<td>Boolean</td>
						<td>false</td>
					</tr>	
					<tr>
						<td>select - disabled</td>
						<td>是否禁用整个select</td>
						<td>&lt;select disabled&gt;&lt;/select&gt;</td>
						<td></td>
					</tr>
					<tr>
						<td>option - disabled</td>
						<td>是否禁用选项</td>
						<td>&lt;option disabled&gt;&lt;/option&gt;</td>
						<td></td>
					</tr>
					<tr>
						<td>selected</td>
						<td>已选项</td>
						<td>&lt;option value="" selected&gt;&lt;/option&gt;</td>
						<td></td>
					</tr>
					<tr>
						<td>size</td>
						<td>输入框尺寸,large | normal | small</td>
						<td>string</td>
						<td>normal</td>
					</tr>
					<tr>
						<td>placeholder</td>
						<td>占位符，也可以直接写在select中</td>
						<td>String</td>
						<td>请选择</td>
					</tr>
				</tbody>				
			</table>


			<div class="site-title">
			  <fieldset><legend><a name="before">另一版本，普通插件形式调用</a></legend></fieldset>
			</div>
			<div>
				<pre class="layui-code" lay-encode="true">
					不依赖layui，需jquery支持
				<script src="js/lay-module/fcSelect/fc.select.js"></script>
				</pre>
			</div>

	</div>
</div>

<script>

// layui 配置
layui.config({
	base: 'js/lay-module/', 		//当前js目录
}).extend({
	fcSelect:'fcSelect/fcSelect',
})

layui.use(['jquery','layer','code','fcSelect'],function(){
	var $ = layui.$,
		layer = layui.layer,
		fcSelect = layui.fcSelect;

	layui.code({
		encode: true
		// ,skin: 'notepad'
	});

	fcSelect.render({
		elem:'.fc-select',
		target:'.doc-content',
		change:function(data) {
			console.log(data)
		}
	})

	fcSelect.render({
		elem:'.fc-select2',
		target:'.doc-content',
		data:[{
			value:'1',
			label:'黄金糕'
		},{
			value:'2',
			label:'双皮奶',
			selected:true,
		},{
			value:'3',
			label:'烤鸭',
		},{
			value:'4',
			label:'烤鱿鱼',
		},{
			value:'5',
			label:'帝王蟹',
		},{
			value:'6',
			label:'水果色拉',
		},{
			value:'7',
			label:'甜品',
		},{
			value:'8',
			label:'皮皮虾',
		}],
		change:function(data) {
			console.log(data)
		},
	})

	var data2 = [{
			value:'Espresso',
			label:'Espresso',
			selected:true,
		},{
			value:'Americano',
			label:'Americano',
			disabled:true,
		},{
			value:'Latte',
			label:'Latte',
			selected:true,
		},{
			value:'Cappuccino',
			label:'Cappuccino',
			selected:true,
		},{
			value:'Cafe Mocha',
			label:'Cafe Mocha',
		},{
			value:'Macchiato',
			label:'Macchiato',
		}]

	fcSelect.render({
		elem:'.fc-select3',
		multiple:true,
		target:'.doc-content',
		// placeholder:'选择多个条件',
		data:data2,
		change:function(data) {
			console.log(data)
			$('#multiple').html(JSON.stringify(data.value))
		}
	})

	fcSelect.render({
		elem:'.fc-select4',
		multiple:true,
		target:'.doc-content',
		data:data2,
		maxTagCount:2,
		change:function(data) {
			// console.log(data)
		},
		close:function(data) {
			// console.log(data)
		},
	})

	// 筛选结果，多选功能
	fcSelect.render({
		elem:'.fc-select5',
		multiple:true,
		target:'.doc-content',
		maxTagCount:2,
		size:'small',
		change:function(data) {
			console.log(data)
		},
		close:function(data) {
			// console.log(data)
		},
	})


	$('.change-data').click(function(){
		$('#demo1').html('<option value="0" selected>item1</option><option value="1">item2</option>');
		fcSelect.render();
	})

});

</script>


</body>
</html>